<template>
  <div>
    <ul>
      <li v-for="m in messageList" :key="m.id">
        <!-- 最垃圾的写法，字符串拼接 -->
        <!-- <router-link :to="'/home/message/detail/'+ m.id + '/' + m.title + '/' + m.content">{{m.title}}</router-link> -->

        <!-- 稍微好一点的写法 -->
        <router-link :to="`/home/message/detail/${m.id}/${m.title}/${m.content}`">{{m.title}}</router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script>
	export default {
	  name: "Message",
    data() {
      return {
        messageList:[
          {id:'tafdswq34',title:'来自10086的消息',content:'您已欠费99元，请及时缴费'},
          {id:'tafdswq35',title:'来自10010的消息',content:'您的流量已经超出100GB'},
          {id:'tafdswq36',title:'来自10000的消息',content:'好消息，好消息，你已获得vip身份'}
        ]
      }
    }
	};
</script>